<template>
  <div>
    <h1>App</h1>

    <div v-watemark="'张三'" style="width: 1000px; height: 600px"></div>

    <hr />

    <button @click="changeMsg">{{ msg }}</button>
    <button v-copy="msg">点我</button>

    <div
      v-copy="'我的天'"
      style="width: 100px; height: 100px; background-color: red"
    ></div>
  </div>
</template>

<script>
import { copy } from "./directives/copy";
import { watemark } from "./directives/watemark";

export default {
  name: "App",

  directives: {
    copy,
    watemark,
  },

  data() {
    return {
      msg: "张三",
    };
  },

  methods: {
    changeMsg() {
      this.msg = this.msg === "张三" ? "里斯" : "张三";
    },
  },
};
</script>
